<template>
  <div>
    <el-row>
      <el-col :span="4" align="center"> 用户 </el-col>
      <el-col :span="20" align="left">
        <div>{{ info.nickName }}</div>
      </el-col>
    </el-row>
    <el-row v-if="info.headline">
      <el-col :span="4" align="center"> <p>标题</p> </el-col>
      <el-col :span="20" align="left"
        ><p>{{ info.headline }}</p></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4" align="center"> <p>内容</p> </el-col>
      <el-col :span="20" align="left" v-html="info.content"></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" align="center"> 图片 </el-col>
      <el-col :span="20" align="left">
        <el-image
          v-for="item in info.download_url"
          :key="item"
          :src="item"
          :preview-src-list="info.download_url"
          style="margin: 1px; width: 70px; height: 50px"
          lazy
          fit="contain"
        />
      </el-col>
    </el-row>

    <el-table
      :data="commentlist"
      style="width: 100%; margin-bottom: 20px"
      row-key="_id"
      border
      default-expand-all
      :tree-props="{ children: 'childComment', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="cNickName" label="用户" width="180">
      </el-table-column>
      <el-table-column prop="comment" label="评论" width="180">
      </el-table-column>
      <el-table-column prop="createDate" label="时间"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getComment } from "@/api/blog";
export default {
  data() {
    return {
      commentlist: [],
      tablelist: [],
      info: [],
      hasChildren: true,
    };
  },
  created() {
    this.info = this.$route.query.row;
    console.log(this.info);
    getComment({
      id: this.$route.query.row._id,
    }).then((res) => {
      // console.log(res);
      this.commentlist = res.data.data;

      for (var i = 0; i < this.commentlist.length; i++) {
        this.commentlist[i] = JSON.parse(this.commentlist[i]);
        if (this.commentlist[i].childComment.length == 0) {
          delete this.commentlist[i].childComment;
        }
      }
      console.log("this.commentlist");
      console.log(this.commentlist);
    });
  },
  methods: {},
};
</script>

<style scoped>
.el-row {
  border-bottom: 1px solid #aaa;
  line-height: 50px;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
</style>
